<!--注册用户-->
<template>
  <div class="main_box" :style="{ height: height + 'px' }">
    <div class="login_box">
      <div class="login_panel">
        <div class="login_title">
          <span :class="{ active: loginType === 1 }" @click="setLoginType(1)"
            >密码登录</span
          >
          <span :class="{ active: loginType === 2 }" @click="setLoginType(2)"
            >短信登录</span
          >
        </div>
        <el-alert
          class="el_alert"
          :title="loginFalseMessage"
          type="error"
          style="margin-bottom: 10px; margin-top: -10px"
          :class="{ active: loginFalseMessage }"
          :closable="false"
          show-icon
        ></el-alert>
        <el-form :model="loginForm" ref="loginForm" label-width="0px">
          <template v-if="loginType === 1">
            <el-form-item key="one_username">
              <el-input
                v-model="loginForm.mobile"
                placeholder="手机号/账号"
                @blur="checkAccount()"
                @keyup.native.enter="login"
              ></el-input>
            </el-form-item>
            <el-form-item key="one_password">
              <el-input
                v-model="loginForm.password"
                type="password"
                autocomplete="new-password"
                placeholder="密码"
                @blur="checkPassword"
                @keyup.native.enter="onSubmit('loginForm')"
              ></el-input>
            </el-form-item>
          </template>
          <template v-if="loginType === 2">
            <el-form-item key="two_phone">
              <el-input
                v-model="loginForm.mobile"
                placeholder="手机号"
                @blur="checkMobile(true)"
                @keyup.native.enter="onSubmit('loginForm')"
              ></el-input>
            </el-form-item>
            <el-form-item class="inline_item" key="two_verify">
              <el-input
                v-model="loginForm.verificationCode"
                style="width: 257px"
                placeholder="请输入短信验证码"
                @blur="checkVerificationCode"
                @keyup.native.enter="login"
              ></el-input>
              <div class="get_code" @click="getSmsByLogin">{{ waitMsg }}</div>
            </el-form-item>
          </template>
          <el-form-item>
            <el-button
              type="primary"
              class="login_btn"
              @click="onSubmit('loginForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <div class="btn_group">
          <router-link to="/user/register">
            <el-button type="text"> 新用户注册 </el-button>
          </router-link>
          <router-link to="/user/forget">
            <el-button type="text" style="color: #c1c1c1">忘记密码？</el-button>
          </router-link>
        </div>
      </div>
    </div>
    <div class="bullet_box">
      <Vertical :bullets="bullets" />
    </div>
  </div>
</template>
<script>
import utils from "@/utils/index.js";
import { Vertical } from '@/components/bullet/index.js';
import Api from '@/api';

export default {
  layout: 'userLay',
  components: {
    Vertical,
  },
  data () {
    return {
      loginType: 1,
      loginForm: {
        mobile: "",
        password: "",
        captcha: "",
        verificationCode: "",
      },
      loginFalse: false,
      loginFalseMessage: "",
      smsCode: true,
      wait: 60,
      waitMsg: "获取验证码",
      height: null,
      flowHeight: null,
      bullets: {
        msglist: ['欢迎马云加入新立讯', '欢迎腾讯入股新立讯', '欢迎小姐姐加入新立讯', '小姐姐，小哥哥，小弟弟，小妹妹'],
        frequency: 2,
      },
    }
  },
  mounted () {
    this.height = document.body.clientHeight - 130;
    this.flowHeight = this.height - 520
  },
  methods: {
    setLoginType (val) {
      this.$refs.loginForm.clearValidate();
      this.loginFalseMessage = '';
      this.loginType = val;
    },
    //获取短信验证码
    getSmsByLogin () {
      let mobile = this.loginForm.mobile || "";
      // 未输入手机号码
      if (!mobile.trim()) {
        this.loginFalse = true;
        this.loginFalseMessage = "请输入手机号码";
        return false;
      }
      // 输入手机号码格式不正确
      if (!utils.verifyPhone(mobile)) {
        if (!this.loginFalse) {
          this.loginFalse = true;
        }
        this.loginFalseMessage = "手机号码格式不正确";
        return false;
      } else {
        this.smsCode = false;
      }
      if (this.wait == 60 && !this.smsCode) {
        // api.getSmsByLogin({ mobile: this.loginForm.mobile }).then((res) => {
        //   if (res.data.code == 200) {
        //     this.timer();
        //     this.smsCode = true;
        //     this.$message({
        //       message: "短信验证码已发送",
        //       type: "success",
        //     });
        //   }
        // });
      }
    },
    timer () {
      if (this.wait == 0) {
        this.wait = 60;
        this.waitMsg = "获取验证码";
        this.smsCode = false;
      } else {
        this.waitMsg = this.wait + "秒后重新发送";
        this.wait--;
        setTimeout(() => {
          this.timer();
        }, 1000);
      }
    },
    checkAccount () {
      let mobile = this.loginForm.mobile || "";
      if (!mobile.trim()) {
        this.loginFalseMessage = "请输入手机号/用户名";
      } else {
        this.loginFalseMessage = "";
        return true;
      }
    },
    checkMobile (isBlur) {
      this.smsCode = true;
      let mobile = this.loginForm.mobile || "";
      if (!mobile.trim()) {
        this.loginFalseMessage = "请输入手机号码";
      } else if (!utils.verifyPhone(mobile)) {
        this.loginFalseMessage = "手机号码格式不正确";
      } else {
        this.smsCode = false;
        this.loginFalseMessage = "";
        return true;
      }
    },
    checkPassword () {
      let password = this.loginForm.password || "";
      if (!password.trim()) {
        this.loginFalseMessage = "请输入密码";
      } else if (password.length < 6 || password.length > 16) {
        this.loginFalseMessage = "请输入6-16位密码";
      } else {
        this.loginFalseMessage = "";
        return true;
      }
    },
    // 验证码
    checkCaptcha () {
      let captcha = this.loginForm.captcha || "";
      if (!captcha.trim()) {
        this.loginFalseMessage = "请输入图片验证码";
      } else if (captcha.length !== 4) {
        this.loginFalseMessage = "请输入4位图片验证码";
      } else {
        this.loginFalseMessage = "";
        return true;
      }
    },
    checkVerificationCode () {
      let verificationCode = this.loginForm.verificationCode || "";
      if (!verificationCode.trim()) {
        this.loginFalseMessage = "请输入短信验证码";
      } else if (verificationCode.length !== 6) {
        this.loginFalseMessage = "请输入6位短信验证码";
      } else {
        this.loginFalseMessage = "";
        return true;
      }
    },
    onSubmit (formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {};
          const { mobile, password, verificationCode } = this.loginForm;
          switch (this.loginType) {
            case 1: //用户名密码登录
              params = {
                username: mobile,
                password
              }
              Api.loginWithPassword(this.$axios, params).then(res => {
                if (res.status == 200) {
                  const { data: { _id } } = res;
                  that.$store.dispatch('user/login', { userName: mobile, userId: _id })
                  this.$router.push({
                    path: '/'
                  });
                }
              })
              break;
            case 2://短信验证码登录
              params = {
                mobile,
                smsCode: verificationCode
              }
              Api.loginWithPhone(this.$axios, params).then(res => {
                if (res.code == 200) {

                }
              })
              break;
          }

        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.main_box {
  display: flex;
  flex-direction: column;
  .bullet_box {
    flex: 1 1 400px;
  }
  .login_box {
    background: url(../../../assets/image/bg.png) #fff no-repeat bottom center;
    background-size: cover;
    height: 520px;
    position: relative;
    .login_panel {
      width: 441px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(244, 244, 244, 1);
      padding: 32px 32px 20px 32px;
      position: absolute;
      top: 47px;
      right: 10%;
    }
    .el_alert {
      overflow: hidden;
      transition: all 0.2s;
      height: 0px;
      padding: 0px 16px;
      opacity: 0;
      &.active {
        opacity: 1;
        height: 34px;
        padding: 8px 16px;
      }
    }
    .login_title {
      font-size: 18px;
      font-weight: 500;
      color: rgba(66, 66, 66, 1);
      line-height: 28px;
      padding-bottom: 30px;
      display: flex;
      span {
        cursor: pointer;
        margin-right: 20px;
        color: #999;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
        height: 34px;
        &.active {
          color: #333333;
          border-bottom: 2px solid #fb363f;
        }
      }
    }
    .login_btn {
      width: 100%;
      margin-top: 10px;
    }
    .code_btn {
      width: 100px;
      height: 40px;
      display: inline-block;
      vertical-align: bottom;
      cursor: pointer;
      margin-left: 12px;
    }
    .get_code {
      width: 100px;
      height: 40px;
      display: inline-block;
      vertical-align: bottom;
      cursor: pointer;
      margin-left: 12px;
      background: rgba(230, 229, 229, 1);
      border: 1px solid rgba(224, 223, 223, 1);
      color: #5b5b5b;
      font-size: 12px;
      line-height: 40px;
      text-align: center;
      &.gray {
        cursor: not-allowed;
      }
    }
    .btn_group {
      display: flex;
      justify-content: space-between;
      margin-top: -22px;
    }
  }
}
</style>